<template>
  <div id="zhiCode">
    <div class="header">
      <div class="block date_box">
        <span class="demonstration">开始时间</span>
        <el-date-picker
          v-model="form.beginTime"
          type="datetime"
          placeholder="选择日期时间">
        </el-date-picker>
      </div>
      <div class="block date_box">
        <span class="demonstration">结束时间</span>
        <el-date-picker
          v-model="form.endTime"
          type="datetime"
          placeholder="选择日期时间">
        </el-date-picker>
      </div>

      <div class="button_box">
        <el-button type ="primary" size ="small" @click = 'getCountList'>查询</el-button>
      </div>
    </div>

    <div class="mian">
      <h3 style="padding: 20px;">支付宝扫码统计列表</h3>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column  type="index">
        </el-table-column>
        <el-table-column prop="cardNo" label="卡号">
        </el-table-column>
        <el-table-column prop="totalMoney" label="交易额">
        </el-table-column>

      </el-table>
    </div>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        value1:'',
        tableData: [],
        form:{
          beginTime:'',
          endTime:'',
          payType:1
        }
      }
    },
    created(){
      //  this.getCountList()
    },
    methods: {
      getCountList(){
        for(let i in this.form){
          if(isNaN(this.form[i])){
            console.log(this.form[i]);
            delete this.form[i]
          }
          if(this.form[i] == ''){
            delete this.form[i]
          }
        }
        if(this.form.beginTime){
          this.form.beginTime = Date.parse(this.form.beginTime);
        }
        if(this.form.endTime){
          this.form.endTime = Date.parse(this.form.endTime);
        }

        this.$api.getCountList(this.form).then(res =>{
          if(res.data.code == '000000'){
            console.log(res.data);
            this.tableData =res.data.data.list;
            this.$message({
              type:'success',
              message:'获取统计列表成功'
            })
          }else{
            this.$message({
              type:'error',
              message:'获取统计列表失败'
            })
          }
        }).catch(() =>{
          this.$message({
            type:'error',
            message:'获取统计列表失败'
          })
        })
      }
    }


  }
</script>

<style lang="less">
  #zhiCode{
    th{
      text-align: center;
    }
    .header{
      display: flex;
      justify-content: center;
      .date_box{
        padding:10px;
        font-size: 14px;
        align-self:center;
        margin: 0 20px;
        input{
          height:30px;
        }
      }
      .button_box{
        align-self:center;
      }
    }
  }
</style>
